<template>
  <div class="right_top flex text-white items-center text-xl">
    <div class="right_top_item">
      <p>姓名：</p>
      <p>{{ patActive.patientName || '--' }}</p>
    </div>
    <div class="right_top_item">
      <p>性别：</p>
      <p>{{ patActive.gender ? (patActive.gender == '1' ? '男' : '女') : '--' }}</p>
    </div>
    <div class="right_top_item">
      <p>年龄：</p>
      <p>{{ patActive.age || '--' }}</p>
    </div>
    <div class="right_top_item">
      <p>诊断：</p>
      <p>{{ patActive.diagnosis || '--' }}</p>
    </div>

    <div class="top_btn cursor-pointer" @click="routerTo">查看报告</div>
  </div>

</template>

<script setup lang="ts" name="Top">
import {useLsdStore} from '@/store/modules/lsd'
import {storeToRefs} from 'pinia'
import {useRouter} from 'vue-router'

const router = useRouter()
const useLsd = useLsdStore()
const {patActive} = storeToRefs(useLsd)

//查看报告
const routerTo = () => {
  if (!useLsd.patActive.visitNoStr) return
  router.push({
    path: '/patient/patientPage',
    query: {
      visitNoStr: useLsd.patActive.visitNoStr
    }
  })
}
</script>

<style scoped lang="less">
.abnormal {
  width: 100%;
  height: 48px;
  background-image: url(@/assets/imgs/abnormal_bg.png);
  background-size: cover;
  background-position: center center;

  .warning {
    color: #fff;
  }

  .btn {
    .btn_item {
      display: inline-block;
      width: 140px;
      line-height: 30px;
      text-align: center;
      color: #ed6a0c;
      border-radius: 4px;
      background: rgba(237, 106, 12, 0.2);
      margin-right: 16px;
      cursor: pointer;
    }
  }
}

.right_top {
  width: 100%;
  height: 96px;
  background-image: url(@/assets/imgs/xxzs_bg.png);
  background-size: cover;
  background-position: center center;
  padding: 0 16px;
  position: relative;

  .right_top_item {
    width: 275px;
    line-height: 30px;

    p:nth-child(1) {
      color: #d0e5e2;
    }

    p:nth-child(2) {
      font-size: 18px;
      font-weight: 600;
    }

    .tag {
      color: #00a991;
      text-align: center;
      padding: 4px 12px;
      border-radius: 4px;
      background: rgba(0, 169, 145, 0.2);
      box-sizing: border-box;
      border: 1px solid #00a991;
      margin-right: 16px;
    }
  }

  .right_top_item:nth-child(4) {
    margin-left: -86px;
    width: 350px;
  }

  .top_btn {
    //width: 104px;
    position: absolute;
    right: 16px;
    bottom: 20px;
    text-align: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0, 169, 145, 0.2);
    box-sizing: border-box;
    border: 1px solid #00a991;
    color: #00a991;
  }
}
</style>
